<template>
  <div style="display: flex;justify-content: space-around">
    <div >
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="myChart" style="width: 400px; height: 400px"></div>
    </div>

  </div>
</template>
<script>
// 基于准备好的dom，初始化echarts实例
import * as echarts from "echarts";
import imgSrc from "../assets/用户头像.jpeg";
export default {
  name: "personRelation",
  props:["persons","linkOfPersons"],
  data() {
    return {
      myChart: null,
      chartData: [],
      chartLink: [],
    };
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let dom = document.getElementById("myChart");
      this.myChart = echarts.init(dom);
      this.chartData = this.dataEChart();
      this.chartLink = this.linkEChart();
      let option = {
        tooltip: {
          show: false,
        },
        series: [
          {
            edgeLabel: {
              normal: {
                formatter: "{c}",
                show: true,
              },
            },
            edgeSymbol: "circle",
            force: {
              repulsion: 2000,
            },
            layout: "force",
            roam: true,
            itemStyle: {
              normal: {
                color: "#6495ED",
              },
              //鼠标放上去有阴影效果
              emphasis: {
                shadowColor: "#3721db",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 40,
              },
            },
            label: {
              normal: {
                show: true,
              },
            },
            //头像
            symbol: `image://${imgSrc}`,
            symbolSize: 60,
            type: "graph",
            links: this.chartLink,
            data: this.chartData,
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.on("click", function(params) {
        console.log(params.data); //获取点击的头像的数据信息,到时候可以调整为跳转到对应作者的页面
      });
    },
    /**
     * 数据集合
     */
    dataEChart() {
      let data = this.persons;
      return data;
    },
    /**
     * 关系数据集合
     */
    linkEChart() {
      let dataLink = this.linkOfPersons;
      return dataLink;
    },
  },
};
</script>
<style></style>
